<template>
  <el-tree :props="props" lazy ref="tree" @node-click="handleNodeClick" :load="loadNode" :data="taskForm" node-key="id"
           :accordion="true" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <copyTask adress='#I4B9U2' style="margin-left: 10px"></copyTask> -->
            <div class="task-table-item-content">
				<div style="display:flex">
                <chooseStatus :taskForm="data.data" style="margin-right: 10px;"></chooseStatus>
                <el-tooltip effect="dark" :content="data.data.name" placement="right">
                    <span class="task-table-item-title" @click="detailsClick(data)">{{ data.data.name }}</span>
                </el-tooltip>
				</div>

              <!--				<div v-for="item in data.tags">-->
              <!--					<el-tag v-if="item.type == 'hollowedOut'" :style="{borderColor:item.color,color:item.color}" class="task-table-item-tag" type="danger" size="mini" effect="plain">{{item.label}}</el-tag>-->
              <!--					<el-tag v-if="item.type == 'solid'" :style="{backgroundColor:item.color}" style="color: white;" class="task-table-item-tag" type="danger" size="mini">标签一</el-tag>-->
              <!--				</div>-->
                  <div style="display:flex;margin-right:15px">
                        <div v-for="items in data.data.tags" :key="items.tagId"
                             :style="{borderColor:items.color,color:items.color}"
                             class="task_tags">{{ items.name }}</div>
                    </div>
            </div>
          <!-- <span class="task-table-item-overdue" v-if="beOverdue(data.data.endDate) > 0"></span> -->
            <div style="display:flex;width: 59%;justify-content: space-between;">
                <div style="display:flex;width:480px">

                    <el-tooltip effect="dark" :content="data.data.taskType|taskTypeFilter" placement="right">
                        <span class="task-table-item-status">{{ data.data.taskType | taskTypeFilter }}</span>
                    </el-tooltip>
                    <div style="display: flex;flex-direction: row;align-items: center;width: 170px;">
                      <span class="task-table-item-date">{{ data.data.startDate }}</span>
                      <span class="task-table-item-icon"
                            v-if="data.data.startDate!=null&&data.data.endDate!=null"> - </span>
                      <span class="task-table-item-icon white-coloe"
                            v-else> - </span>
                      <span class="task-table-item-date">{{ data.data.endDate }}</span>
                    </div>
                  <div style="display: flex;flex-direction: row;align-items: center;width: 170px;">
                      <span class="task-table-item-date">{{ data.data.workStartDate }}</span>
                      <span class="task-table-item-icon"
                            v-if="data.data.workStartDate!=null&&data.data.workEndDate!=null"> - </span>
                      <span class="task-table-item-icon white-coloe"
                            v-else> - </span>
                      <span class="task-table-item-date">{{ data.data.workEndDate }}</span>
                    </div>
                </div>
                <span class="task-table-item-overdue"
                      v-if="data.data.status!='00'&&data.data.status!='07'&&data.data.status!='08'&&data.data.status!='10'">{{ beOverdue(data.data.endDate) ? '逾期' + beOverdue(data.data.endDate) + '天' : '' }}</span>

                <div class="task-table-item-member">
                    <el-tooltip v-if="data.data.masterSysUser" effect="dark" :content="data.data.masterSysUser.userName"
                                placement="right">
                        <span class="task-table-item-member-title">{{ data.data.masterSysUser.userName }}</span>
                    </el-tooltip>
                    <div v-if="data.data.masterSysUser" class="task-table-item-member-logo">
                        <el-image style="width: 100%;height: 100%;border-radius: 100%"
                                  :src="data.data.masterSysUser.avatar?data.data.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'">
                        </el-image>
                    </div>
                </div>

            </div>
        </span>
  </el-tree>
</template>

<script>
import chooseStatus from "@/components/chooseStatus";
import copyTask from "@/components/copyTask/index";
import {getTreeData} from "@/api/task";

export default {
  data() {
    return {
      props: {
        label: "indexName",
        children: [],
        isLeaf: "isLeaf",
      },
    };
  },
  props: ["type", "taskForm"],
  components: {
    chooseStatus,
    copyTask,
  },
  filters: {
    taskTypeFilter(data) {
      if (data == "00") {
        return "需求";
      } else if (data == "01") {
        return "设计";
      } else if (data == "02") {
        return "开发";
      } else if (data == "04") {
        return "测试";
      } else if (data == "05") {
        return "缺陷";
      } else if (data == "06") {
        return "其他";
      }
    },
  },
  methods: {
    // 计算逾期时间
    beOverdue(val) {
      var timestamp1 = new Date(val).getTime(); //结束时间
      var timestamp2 = new Date().getTime(); //现在时间
      var d = parseInt((timestamp1 - timestamp2) / 1000 / (24 * 3600)); //d>0 没到时间  d<0时间已经过了
      if (d < 0) {
        return Math.abs(d);
      } else {
        return null;
      }
    },
    detailsClick(data) {
      if (this.type == "contract") {
        this.$router.push({
          path: "/contract/details",
        });
      } else {
        this.$router.push({
          path: "/task/details",
          query: {
            id: data.id,
          },
        });
      }
    },
    // 异步树节点点击事件
    handleNodeClick(data) {
      console.log("node", data);
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      console.log(node);
      console.log(resolve);
      console.log("异步树111");
      // 一级节点处理
      if (node.level === 0) {
        // this.requestTree(resolve)
      }
      // 其余节点处理
      if (node.level >= 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve);
      }
    },
    // 异步加载叶子节点数据函数
    getIndex(node, resolve) {
      console.log(node);
      console.log("w我进来子节点");
      var _this = this;
      let level = Number(node.data.data.taskLevel) + 1;
      getTreeData({
        level: level,
        parentId: node.data.id,
      }).then((res) => {
        const {data} = res;
        resolve(data.data);
      });
    },
    // 首次加载一级节点数据函数
    // requestTree(resolve) {}
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
  justify-content: space-between;
}

.task-table-item-content {
  width: 40%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* flex-grow: 1; */
}

.task-table-item-title {
  cursor: pointer;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2e405e;
  font-size: 12px;
  margin-right: 10px;
  width: 200px;
}

.task-table-item-title:hover {
  color: #1890ff;
}

.task-table-item-tag {
  margin-right: 10px;
}

.task-table-item-status {
  max-width: 52px;
  min-width: 22px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #909aaa;
  margin-right: 10px;
  font-size: 12px;
}

.task-table-item-datebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
  max-width: 160px;
  width: 100%;
  justify-content: flex-end;
}

.task-table-item-date {
  color: #909aaa;
  /*margin-right: 10px;*/
  font-size: 12px;
  display: block;
  width: 68px;
}

.task-table-item-icon{
  color: #909aaa;
  /*margin-right: 10px;*/
  font-size: 12px;
  display: block;
  width: 20px;
  text-align: center;
}

.white-coloe{
  color: white;
}

.task-table-item-overdue {
  font-size: 12px;
  color: #ff4949;
  width: 70px;
  margin-right: 10px;
  text-align: right;
}

.task-table-item-member {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 111px;
  height: 20px;
  text-align: right;
}

.task-table-item-member-title {
  width: 86px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.task-table-item-member-title:hover {
  color: #1890ff;
}

.task-table-item-member-logo {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #e47777;
}

.task_tags {
  height: 100%;
  padding: 3px;
  font-size: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  margin-right: 5px;
}
</style>
